@use "@/assets/styles/mixin";

.transfer-container {
  @include mixin.flex-align;
  margin-bottom: 30px;

  .check-container {
    @include mixin.flex-column;
    width: 45%;
    height: 360px;
    border-radius: 6px;
    border: 1px solid #DCDCDC;
    position: relative;
    .search-box{
      width: calc(100% - 20px);
      position: absolute;
      left: 10px;
      z-index: 99;
    }
  }

  .check-all-container {
    @include mixin.flex-align;
    height: 48px;
    padding: 0 16px;
    //border-bottom: 1px solid #E7E7E7;
  }

  .list-container {
    flex: 1;
    padding: 0 8px 30px 8px;
    overflow-y: auto;
    .left-list-content{
      padding-top: 30px;
    }
    &-item {
      @include mixin.flex-between;
      @include mixin.flex-align;
      margin-top: 10px;
      padding: 0 8px;
    }
    .item-active {
      background-color: #F2F3FF;
      border-radius: 3px;
    }
    .drag-handle {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
    .el-input{
      width: calc(100% + 20px);
      position: relative;
      left: -10px;
      border: none;
    }
  }
  :deep(.el-checkbox){
    display: inline-flex;
    height: auto;
  }
  :deep(.el-checkbox__label) {
    //width: 100px;
    //overflow: hidden;
    //white-space: nowrap;
    //text-overflow: ellipsis;
    white-space: wrap;
    line-height: 1.3;
  }

  .center-buttons {
    @include mixin.flex-center;
    flex-direction: column;
    gap: 10px;
    margin: 0 12px;

    :deep(.el-button) {
      margin-left: 0;
    }
  }
}

:deep(.el-empty__image){
  width: 60%;
}



